<template>
  <HorizonScroll :target="target">
    <template v-slot:carousel_content>
      <section >
        <div class="index_hd">
      <div class="index_title">
          <h2 class="icon_txt"> 精彩推荐</h2>
      </div> 
    </div>
      <div id="carousel_JingCai" class="carousel slide">
        <div class="carousel-inner" >
          <div class="carousel-item active">
            <div class="double_img">
              <img :src="collection[0]" alt="">
              <img :src="collection[1]" alt="">
            </div>
          </div>
          <div class="carousel-item">
            <div class="double_img">
            <img :src="collection[2]" alt="">
            <img :src="collection[3]" alt="">
            </div>
          </div>
          <div class="carousel-item">
            <div class="double_img">
            <img :src="collection[4]" alt="">
            <img :src="collection[5]" alt="">
            </div>
          </div>
          
        </div>
      </div>
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carousel_JingCai" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carousel_JingCai" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carousel_JingCai" data-bs-slide-to="2" aria-label="Slide 3"></button>

      </div>
    </section>
    </template>
  </HorizonScroll>

     
</template>

<script>
  const PathFolder = require.context('@/assets/jingcai', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数
  import HorizonScroll from '../HorizonScroll.vue';
  import {CreateImgList} from '@/utils/mixin.js'//此处必须使用具名导入，而不能使用默认导入
  // import { Carousel } from 'bootstrap';
  export default{
        name:'JingCai',
        components:{
          HorizonScroll
        },
        mixins:[CreateImgList],
        data(){
            return{
            Nums:6,
            PathFolder,
            target:'#carousel_JingCai',
            collection:[]
                  }
            },
        beforeMount(){
            this.GetImgPath(this.PathFolder,'DianTai',this.Nums);//提供图片数组
        },
        mounted(){
            this.collection = this.ImgList[0].DianTai;
            // const carousel = new Carousel('#carousel_JingCai')
           
           
          }
        ,
      
    }
</script>

<style scoped lang="scss">
    @import '@/Style/scss/_variables.scss';
    @import '@/Style/scss/title.scss';
    .wrap{//不可删除，这是通过horizonscroll组件控制背景色的属性
      background-color: $primary-color;
    }
    .index_title{
      background-position: $bg-offset-jingcai;
    }
   .double_img{
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 1200px;
      grid-gap: 20px;
      img{
        width: 600px;
      }
   }
  .index_title{
      display: flex;
      justify-content: center;
    }
    

</style>